<template>
  <div class="ruler" :style="`width:${width}px;`">
    <!-- 大尺 -->
    <div class="hour" v-for="i in hour">
      <span style="position: absolute; right: 0;bottom: 0;font-size: 12px;">{{ rulerList[i - 1] }}</span>
      <!-- 小尺 -->
      <div class="mi" v-for="i in 10"></div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    width: {//盒子宽度
      type: Number,
      default: 500,//px
    },
    titleWidth: {//标题宽度
      type: Number,
      default: 100,//px
    },
    // 起始时间
    createTime: {
      type: String,
      default: '2023-04-08 11:10:05',//px
    },
    // 小时数
    hour: {
      type: Number,
      default: 5,
    },
  },
  data() {
    return {
      createTimeMS: 0,
      rulerList: [],//刻度尺列表
    }
  },
  mounted() {
    this.setRule()
  },
  watch: {
    createTime() {
      this.setRule()
    },
    hour() {
      this.setRule()
    }
  },
  methods: {
    setRule() {
      this.createTimeMS = Date.parse(this.createTime)
      this.rulerList = []
      for (let i = 0; i < this.hour; i++) {
        let timeSM = (i + 1) * 60 * 60 * 1000 //需要加的时间毫秒数 这里为一小时
        this.rulerList.push(
          this.formatSeconds(timeSM, '2')
        )
      }
      setTimeout(() => {
        this.$forceUpdate();
      }, 300)
    },
    // 毫秒转换为时分秒
    formatSeconds(num, type) {
      function setDb(num) {
        //补零操作
        if (num < 10) {
          return '0' + num;
        } else {
          return '' + num;
        }
      }
      let time = new Date(this.createTimeMS + num);
      let year = time.getFullYear();//年
      let mon = setDb(time.getMonth() + 1);//0
      let day = setDb(time.getDate());//24
      let hour = setDb(time.getHours());//时
      let min = setDb(time.getMinutes());//分
      let sec = setDb(time.getSeconds());//秒
      if (type == '1') {
        // 年月日时分秒
        return `${year}-${mon}-${day} ${hour}:${min}:${sec}`
      } else if (type == '2') {
        // 时分秒
        return `${hour}:${min}:${sec}`
      }
    },
  },
}
</script>
<style scoped lang="scss">
.ruler {
  border-left: 1px solid #31C2AF;
  //border-left: #31C2AF 1px solid;
  //border-right: #31C2AF 1px solid;
  //border-top: #31C2AF 1px solid;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;


  .hour {
    position: relative;
    height: 40px;
    border-right: 1px solid #31C2AF;
    text-align: right;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 100%;

    &:nth-last-child(1) {
      border: none !important;
    }

    .mi {
      height: 20px;
      width: 20%;
      border-right: 1px solid #31C2AF;

      &:nth-last-child(1) {
        border: none !important;
      }
    }

    span {
      position: absolute;
      right: 0;
      bottom: 0;
    }
  }
}
</style>